<form [formGroup]='form' (ngSubmit)="onSubmit(form,$event)">
  <mat-card>
    <mat-card-header>
      <mat-card-title>注册</mat-card-title>
      <!-- <mat-card-subtitle>Dog Breed</mat-card-subtitle> -->
    </mat-card-header>
    <mat-tab-group>
      <mat-tab label="账号信息">
        <mat-card-content>
          <mat-form-field class="full-width">
            <input matInput type="text" placeholder="您的eamil" formControlName="email">
          </mat-form-field>
          <mat-form-field class="full-width">
            <input matInput type="text" placeholder="姓名" formControlName="name">
          </mat-form-field>
          <mat-form-field class="full-width">
            <input matInput type="password" placeholder="您的密码" formControlName="password">
          </mat-form-field>
          <mat-form-field class="full-width">
            <input matInput type="password" placeholder="确认密码" formControlName="repeat">
          </mat-form-field>
          <!-- <mat-grid-list cols="6" rowHeight="1:1">
                <mat-grid-tile *ngFor="let item of items">
                  <mat-icon class='avatar' [svgIcon]='item'></mat-icon>
                </mat-grid-tile>
              </mat-grid-list> -->
          <app-image-list-select [useSvgIcon]="true" [cols]="6" [title]="'选择头像:'" [items]="items" formControlName="avatar">
          </app-image-list-select>
          <div class="full-width action-area">
            <button mat-raised-button type="button" (click)="nextTab()">下一步</button>
            <span class="fill-remaining-space"></span>
            <span>
              <span>已有账户？
                <a routerLink="/login">登录</a>
              </span>
              <span>忘记
                <a routerLink="/forgot">密码？</a>
              </span>
            </span>
          </div>
        </mat-card-content>
      </mat-tab>
      <mat-tab label="个人信息">
        <div class="full-width">
          <app-identity-input formControlName='identity'></app-identity-input>
        </div>
        <div class="full-width">
          <app-age-input formControlName="dateOfBirth"></app-age-input>
        </div>
        <div class="full-width">
          <app-area-list formControlName="address"></app-area-list>
        </div>
        <div class="full-width">
          <button mat-raised-button type="button" (click)="prevTab()">上一步</button>
          <button mat-raised-button color="primary" type="submit" [disabled]="!form.valid">注册</button>
          <span class="fill-remaining-space"></span>
          <span>
            <span>已有账户？
              <a routerLink="/login">登录</a>
            </span>
            <span>忘记
              <a routerLink="/forgot">密码？</a>
            </span>
          </span>
        </div>
      </mat-tab>
    </mat-tab-group>
  </mat-card>
</form>
